<template>
    <div>
        <!-- 头部 -->
        <myheader />

        <!-- 表单注册 -->
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="form.username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="form.password"
            type="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
            v-model="form.mobile"
            type="mobile"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
            />

            <drag-verify
                :width='width'
                :height='height'
                success-text='验证成功'
                text='向右滑动验证'
                ref="Verify"
            />


        </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" style="width:100px">
                注册
                </van-button>
            </div>
    </van-form>


    </div>
</template>

<script>

import myheader from './myheader.vue'
import dragVerify from 'vue-drag-verify'
export default {
    // 组件注册
    components:{
        'myheader':myheader,
        'drag-verify':dragVerify
    },
    //变量
    data(){
        return{
            form:{},
            width:300,
            height:40

        }
    },
    //方法
    methods: {
        onSubmit(){
            console.log(this.$refs.Verify.isPassing)
            if(this.$refs.Verify.isPassing){
                this.$axios.post('/users/reg/',this.form).then(res=>{
                    if(res.data.code == 200){
                        this.$toast.success('注册成功')
                    }else if(res.data.code == 20020) {
                        alert(res.data.msg)
                    }else if(res.data.code == 11111){
                        alert(res.data.msg)
                    }
                    
                })
            }else {
                this.$toast.fail('请滑动滑块')
            }
        }
    },
    //挂载初始化
        
}
</script>

<style scoped>

</style>




